<template>
    <!-- 编辑专家认证的擅长领域 -->
    <div class="goodField">
        <div class="domain">
            <p class="ly_title">二级类别</p>
            <ul class="ly_labelTwo">
                <li
                :class="domainTwo == l2.id ? 'isActive' : ''"
                v-for="(l2, index) in labelTwo"
                :key="l2.id"
                @click="clickDomainTwo(index, l2)"
                >
                    {{ l2.name }}
                    <i v-show="calcSelected(l2)">{{ calcSelected(l2) }}</i>
                </li>
            </ul>
            <p class="ly_title">三级类别</p>
            <ul class="ly_labelThree">
                <li v-for="l3 in labelThree" :key="l3.id">
                    <div class="ly_labelTDiv">
                        <p>{{ l3.name }}</p>
                        <el-checkbox :label="l3" v-model="l3.checked" @change="changeThreeCheck(l3)"></el-checkbox>
                    </div>
                    <!-- 选择镇区 -->
                    <!-- <el-cascader
                        v-if="l3.areaType == '4'"
                        size="large"
                        popper-class="selectArea"
                        :options="l3.cityCodeOptions"
                        :props="optionProps"
                        v-model="l3.selectServiceArea"
                        :show-all-levels="false"
                        placeholder="选择服务地区">
                    </el-cascader> -->
                </li>
            </ul>
            <SubBtn>
                <template slot="btn">
                    <el-button round @click="cancelBtn">取消</el-button>
                    <el-button round class="addBtn" @click="submit">确认</el-button>
                </template>
            </SubBtn>
        </div>
    </div>
</template>

<script>
import SubBtn from "@/wss/components/subBtn.vue";
import { getFindConsultTypeListApi } from "@/BMViews/api/work/consult.js";
import { getFindProjectTypelistApi } from "@/wss/newApi_3-24/work/projectType.js";
import { editUpdateExpertApi } from "@/wss/newApi_3-24/work/expert.js";
import {cityTree,inCityCodeClass,inAreaCodeClass} from "@/wss/utils/wss.js";
export default {
    name:'editGoodField',
    props:{
        selectExpertInfo:{
            type: Object
        },
        selectProjectTypeOne:{
            type: Object
        },
        // 当前审核状态 0未审核 1审核成功 2审核失败
        filterText:{
            type: String
        }
    },
    components:{SubBtn},
    data(){
        return{
            domainLabel: {}, // 获取的擅长领域列表
            domainOne: "0", //当前选中的一级类型擅长领域

            labelTwo: [], //选择的二级类别擅长领域列表
            domainTwo: "", //当前选中的二级类型擅长领域id

            selectServiceArea:[],//选择的服务镇区县
            //服务城市 配置项
            optionProps:{
                multiple: true,
                value: 'value',
                label: 'label',
                children: 'children'
            },

            labelThree: [], //选择的三级类别擅长领域列表
            domainThree: [], //选择的三级类别擅长领域
            tsDomainThree: [],//暂存的数据
        }
    },
    mounted(){
        // 根据字段判断 skilledList咨询专家 和 projectRuleList项目专家
        if(this.selectExpertInfo.type=='2'){
            // 获取之前清空一下数据
            this.labelTwo = []
            this.labelThree = []
            this.domainThree = []
            this.tsDomainThree = []
            // 获取之前清空一下数据end
            this.tsDomainThree = this.selectExpertInfo.skilledList //暂存的数据
            this.gerConsultTypeList() //获取咨询类型列表
        }else if(this.selectExpertInfo.type=='3'){
            // 获取之前清空一下数据
            this.labelTwo = []
            this.labelThree = []
            this.domainThree = []
            this.tsDomainThree = []
            // 获取之前清空一下数据end
            this.tsDomainThree = this.selectExpertInfo.projectRuleList //暂存的数据
            this.getProjectTypelist() //获取项目类型列表
        }
        
    },
    watch:{
        // 根据字段判断 skilledList咨询专家 和 projectRuleList项目专家
        selectExpertInfo(newValue,oldValue){
            if(this.selectExpertInfo.type=='2'){
                // 获取之前清空一下数据
                this.labelTwo = []
                this.labelThree = []
                this.domainThree = []
                this.tsDomainThree = []
                // 获取之前清空一下数据end
                this.tsDomainThree = this.selectExpertInfo.skilledList //暂存的数据
                this.gerConsultTypeList() //获取咨询类型列表
            }else if(this.selectExpertInfo.type=='3'){
                // 获取之前清空一下数据
                this.labelTwo = []
                this.labelThree = []
                this.domainThree = []
                this.tsDomainThree = []
                // 获取之前清空一下数据end
                this.tsDomainThree = this.selectExpertInfo.projectRuleList //暂存的数据
                this.getProjectTypelist() //获取项目类型列表
            }
        },
    },
    methods:{

        //获取咨询类型列表
        async gerConsultTypeList() {
            let result = await getFindConsultTypeListApi();
            if(result.code==200){
                let list = result.rows
                this.labelTwo = list.find(item=>{
                    return item.id == this.selectExpertInfo.typeId
                }).children
                //默认选中第一个二级类型
                this.domainTwo = this.labelTwo[0].id
                // 获取默认显示的三级类别数据
                this.labelThree = this.labelTwo[0].children
                
                // 拿到全部三级类别
                let threeList = []
                this.labelTwo.forEach(item=>{
                    if(item.children){
                        item.children.forEach(k=>{
                            threeList.push(k)
                        })
                    }
                })
                this.domainThree = [] //拿到之前清除之前的数据
                // 渲染已选的三级类别数据
                if(this.selectExpertInfo.skilledList){
                    this.selectExpertInfo.skilledList.forEach(item=>{
                        let obj = threeList.find(k=>{
                            return k.id == item.id
                        })
                        if(obj) obj.checked = true
                        this.domainThree.push(obj)
                    })
                }
            }
        },

        //获取项目类型列表
        async getProjectTypelist() {
            let result = await getFindProjectTypelistApi();
            if(result.code==200){
                let list = result.rows
                console.log(list,this.selectExpertInfo,'获取项目类型列表获取项目类型列表');
                this.labelTwo = list.find(item=>{
                    return item.id == this.selectExpertInfo.typeId
                }).children
                //默认选中第一个二级类型
                this.domainTwo = this.labelTwo[0].id
                // 获取默认显示的三级类别数据
                this.labelThree = this.labelTwo[0].children
                
                // 拿到全部三级类别
                let threeList = []
                this.labelTwo.forEach(item=>{
                    if(item.children){
                        item.children.forEach(k=>{
                            threeList.push(k)
                        })
                    }
                })
                this.domainThree = [] //拿到之前清除之前的数据
                // 渲染已选的三级类别数据
                if(this.selectExpertInfo.projectRuleList){
                    this.selectExpertInfo.projectRuleList.forEach(item=>{
                        let obj = threeList.find(k=>{
                            return k.id == item.typeId
                        })
                        if(obj) obj.checked = true
                        this.domainThree.push(obj)
                    })
                }

                return
                // 获取三级类别的cityCode对应的省市区数据 下拉选择框
                threeList.forEach(item=>{
                    if(item.cityCode){
                        this.getAreaVisibleChange(item)
                    }
                })

                // 渲染回显选择镇县区的数据 labelThree三级列表 l3.selectServiceArea
                // 把传过来的已选好的projectRuleList的cityCode 放入三级列表里面的selectServiceArea
                if(this.selectExpertInfo.projectRuleList){
                    this.selectExpertInfo.projectRuleList.forEach(item=>{
                        // 过滤出当前三级列表里面和传过来的已选好的擅长领域对应上的三级类别
                        let obj = threeList.find(k=>{
                            return k.id == item.typeId
                        })
                        // 如果已选好的三级类别有cityCode，那就要回显数据
                        if(item.cityCode){
                            let cityCodeList = item.cityCode.split(/[,,，]/)
                            let data = []
                            cityCodeList.forEach(item=>{
                                let arr = []
                                arr.push(`${item.substring(0,2)}0000`)
                                arr.push(`${item.substring(0,4)}00`)
                                arr.push(item)
                                data.push(arr)
                            })
                            this.$set(obj,'selectServiceArea',data)
                        }
                    })
                }
            }
        },
        
        //点击二级类别擅长领域
        clickDomainTwo(index, l2) {
            this.domainTwo = l2.id;
            this.labelThree = l2.children;
        },

        // 选择三级类别的时候
        changeThreeCheck(l3){
            if(l3.checked){
                this.domainThree.push(l3)
            }else{
                let index = this.domainThree.findIndex((item) => item.id == l3.id) //获取下标
                this.domainThree.splice(index,1) // 根据下标去删数据
            }
        },

        // 获取镇区县的选择数据
        getAreaVisibleChange(l3){
            let arr = inAreaCodeClass(l3.cityCode)
            this.$set(l3,'cityCodeOptions',arr)
        },

        // 选择镇区县的回调
        changeArea(){
            let newCityCode = []
            this.selectServiceArea.forEach(item=>{
                newCityCode.push(item[2])
            })
            this.expert.cityCode = newCityCode.join(',')
        },

        // 点击取消按钮
        cancelBtn(){
            // 还原之前的数据
            // 拿到全部三级类别
            let threeList = []
            this.labelTwo.forEach(item=>{
                if(item.children){
                    item.children.forEach(k=>{
                        k.checked = false //先把全部改成false
                        threeList.push(k)
                    })
                }
            })
            this.domainThree = [] //拿到之前清除之前的数据
            // 渲染已选的三级类别数据
            if(this.selectExpertInfo.type=='2'){
                // 咨询的
                this.selectExpertInfo.skilledList.forEach(item=>{
                    let obj = threeList.find(k=>{
                        return k.id == item.id
                    })
                    if(obj) obj.checked = true
                    this.domainThree.push(obj)
                })
            }else if(this.selectExpertInfo.type=='3'){
                // 项目的
                this.selectExpertInfo.projectRuleList.forEach(item=>{
                    let obj = threeList.find(k=>{
                        return k.id == item.typeId
                    })
                    if(obj) obj.checked = true
                    this.domainThree.push(obj)
                })
            }

            // 通知专家认证页面关闭抽屉
            this.$bus.$emit('closeGoodFieldBus')
        },

        // 点击确认按钮
        submit(){
            let data = {
                id: this.selectExpertInfo.id
            }
            if(this.domainThree.length){
                // 根据字段判断 skilledList咨询专家 和 projectRuleList项目专家
                if(this.selectExpertInfo.type=='2'){
                    // skilledList咨询专家
                    data.skilledList = []
                    this.domainThree.forEach(item=>{
                        if(item){
                            data.skilledList.push({
                                id: item.id,
                                name: item.name
                            })
                        }
                    })
                }else if(this.selectExpertInfo.type=='3'){
                    // projectRuleList项目专家
                    data.projectRuleList = []
                    this.domainThree.forEach(item=>{
                        // 获取所有镇区的数据cityCode
                        // let cityCode = []
                        // if(item.selectServiceArea){
                        //     item.selectServiceArea.forEach(s=>{
                        //         cityCode.push(s[2])
                        //     })
                        // }
                        // 添加数据
                        if(item){
                            // 如果areaType==‘1’的话就是无限制，要默认加上 cn
                            let cityCode = ''
                            if(this.selectProjectTypeOne.areaType == '1'){
                                cityCode = 'cn'
                            }else{
                                cityCode = this.selectExpertInfo.projectRuleList && this.selectExpertInfo.projectRuleList[0].cityCode ? this.selectExpertInfo.projectRuleList[0].cityCode : ''
                            }
                            data.projectRuleList.push({
                                cityCode: cityCode,
                                expertId: this.selectExpertInfo.id,
                                name: item.name,
                                typeId: item.id,
                                userId: this.selectExpertInfo.userId
                            })
                        }
                    })
                }
                // 当前审核状态 0未审核 1审核成功 2审核失败
                if(this.filterText == '0'){
                    // 未审核的把修改的擅长领域给会专家认证页面
                    let state = ''
                    if(this.selectExpertInfo.type=='2'){
                        state = 'zx'
                        this.$bus.$emit('getEditGoodField',data.skilledList,state)
                    }else if(this.selectExpertInfo.type=='3'){
                        state = 'xm'
                        this.$bus.$emit('getEditGoodField',data.projectRuleList,state)
                    }
                }else{
                    this.editUpdateExpert(data) // 修改专家认证擅长领域
                }
            }else{
                this.$message({message: '请选择擅长领域',type: 'warning'});
            }
        },

        // 修改专家认证擅长领域
        async editUpdateExpert(data){
            console.log(data,'修改专家认证擅长领域');
            // 用form表单提交
            let formDate = new FormData();
            formDate.set("id", data.id);
            //咨询的
            if(data.skilledList){
                data.skilledList.forEach((item, i) => {
                    formDate.append(`skilledList[${i}].id`, item.id);
                    formDate.append(`skilledList[${i}].name`, item.name);
                });
            }
            //项目的
            if(data.projectRuleList){
                data.projectRuleList.forEach((item, i) => {
                    if(item.cityCode) formDate.append(`projectRuleList[${i}].cityCode`, item.cityCode);
                    formDate.append(`projectRuleList[${i}].expertId`, item.expertId);
                    formDate.append(`projectRuleList[${i}].name`, item.name);
                    formDate.append(`projectRuleList[${i}].typeId`, item.typeId);
                    formDate.append(`projectRuleList[${i}].userId`, item.userId);
                });
            }
            let result = await editUpdateExpertApi(formDate)
            if(result.code == 200){
                this.$message({message: '编辑成功',type: 'success'});
                // 通知专家认证页面关闭抽屉 并且刷新数据
                this.$bus.$emit('closeGoodFieldBus',this.selectExpertInfo.id)
            }
        },
        
    },
    computed:{
        //计算擅长领域的二级类别选中的数量
        calcSelected() {
            return function (l2) {
                let sum = 0;
                this.domainThree.forEach((item) => {
                    if(item){
                        if (item.pid == l2.id) sum++
                    }
                });
                return sum;
            };
        },
    },
}
</script>

<style scoped>
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 多选框 */
::v-deep .el-checkbox__label {
  display: none;
}

::v-deep .el-checkbox .el-checkbox__inner {
  width: 24px;
  height: 24px;
  border-color: #bbbbbb;
  background: #fff;
  border-radius: 50%;
}
::v-deep .el-checkbox .is-disabled .el-checkbox__inner {
  background: #f2f2f2;
}
::v-deep .el-checkbox .is-checked .el-checkbox__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  width: 9px;
  height: 5px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 6px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(0deg) scaleY(0);
  border-radius: 0px;
  background: none;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: rotate(-45deg) scaleY(1);
}

/* 擅长领域 */
.goodField{
    padding: 0 30px;
}
.ly_title {
  color: #999;
  font-size: 12px;
  margin: 24px 0;
}
.ly_labelOne {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.ly_labelOne li {
  flex: 1;
  background-color: #f1f3ff;
  border: 1px solid #e5e6e9;
  text-align: center;
  line-height: 50px;
  color: #686975;
  font-size: 18px;
  font-weight: bold;
  margin-right: 1%;
  transition: all 0.3s;
  cursor: pointer;
}
.ly_labelOne li:first-child {
  border-radius: 40px 0 0 40px;
}
.ly_labelOne li:last-child {
  border-radius: 0 40px 40px 0;
  margin-right: 0;
}
.ly_labelOne li.isActive,
.ly_labelOne li:hover {
  background-color: #39486f;
  color: #fff;
}
.ly_labelTwo {
  display: flex;
  flex-wrap: wrap;
}
.ly_labelTwo li {
  position: relative;
  width: 16%;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  margin-right: 5%;
  margin-bottom: 12px;
  background-color: #f4f5f8;
  transition: all 0.3s;
  cursor: pointer;
}
.ly_labelTwo li:nth-child(5n) {
  margin-right: 0;
}
.ly_labelTwo li > i {
  position: absolute;
  right: 0;
  top: -5px;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  font-style: normal;
  font-weight: 400;
  background-color: #f87a23;
  color: #fff;
}
.ly_labelTwo li.isActive,
.ly_labelTwo li:hover {
  font-weight: bold;
  background-color: #fef1e9;
  color: #f87a23;
}
.ly_labelThree {
  margin-bottom: 80px;
}
.ly_labelThree li {
  margin-bottom: 30px;
}
.ly_labelThree li .ly_labelTDiv{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #ecedf0;
}
.ly_labelThree li > p {
  font-size: 16px;
  color: #333;
}

.ly_labelThree li .el-cascader {
    width: 100%;
    margin-top: 5px;
}
</style>